<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="obj.name = 'rose' ">修改obj.name</button>
        <button @click="obj.age = 55 ">修改obj.age</button>

        <button @click="obj.pet.nickname = '小强' ">修改obj.pet.nickname</button>
        <p>{{ obj }}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    obj: {
                        name: 'jack',
                        age: 16,
                        pet: {
                            nickname: '旺财',
                            age: 2
                        }
                    }
                }
            },
            watch: {
               // 侦听对象的改变，因为对于obj而言，它没变过
               // 因为obj只是存的地址，地址没变过
            //    obj () {
            //     console.log('obj改变了')
            //    },

                // 以下能侦听到对象里属性的改变
            //    "obj.name" () {
            //         console.log('obj的name改变了')
            //    },
            //    "obj.age" () {
            //         console.log('obj的age改变了')
            //    },
                
                // 万一obj有十个属性，我希望任何一个属性发生改变都能被侦听到
                // 就可以用深度侦听 --> 让对象里任意属性发生改变都能被侦听到
                obj: {
                    // 开启深度侦听
                    deep: true,
                    // 当obj里任何属性发生改变就会调用的回调函数
                    handler (newVal, oldVal) {
                        console.log('obj有属性改变了',newVal === oldVal) // true
                    },
                    // 是否要初始化执行
                    // 什么叫初始化执行：简单来说当前页面一打开就立即调用
                    immediate: true
                }
            }
        })
    </script>
</body>
</html>